<template>
  <el-table v-bind="attrs" :data="tableData" style="width: 100%">
    <el-table-column
      v-for="(item, index) in columns"
      :prop="item.key"
      :label="item.label"
      :fixed="item.fixed"
      :width="item.width"
    >
      <slot :name="`${item.key}TR`" :record="tableData[index]">asdf</slot>
    </el-table-column>

    <el-table-column fixed="right" label="操作" min-width="120">
      <slot name="options">
        <el-button link type="primary" size="small" @click="handleClick">
          详情
        </el-button>
        <el-button link type="primary" size="small">编辑</el-button>
      </slot>
    </el-table-column>
  </el-table>
  <el-pagination
    v-model:current-page="currentPage4"
    v-model:page-size="pageSize4"
    :page-sizes="[100, 200, 300, 400]"
    :size="size"
    :disabled="disabled"
    :background="background"
    layout="total, sizes, prev, pager, next, jumper"
    :total="400"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>
<script setup>
const attrs = useAttrs()
const props = defineProps({
  columns: {
    type: Array,
    default: () => []
  },
  tableData: {
    type: Array,
    default: () => []
  }
})

const handleClick = () => {
  console.log('click')
}
const currentPage1 = ref(5)
const currentPage2 = ref(5)
const currentPage3 = ref(5)
const currentPage4 = ref(4)
const pageSize2 = ref(100)
const pageSize3 = ref(100)
const pageSize4 = ref(100)
const size = 20
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = val => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = val => {
  console.log(`current page: ${val}`)
}
</script>
<style lang="scss" scoped></style>
